<template>
	<div>
		<!--<el-carousel indicator-position="outside">
											<el-carousel-item v-for="item in 4">
												<h3>{{ item }}</h3>
											</el-carousel-item>
										</el-carousel>-->
	
		<Login></Login>
		<el-button plain @click="open5">
			消息
		</el-button>
	</div>
</template>

<script>
import Login from './Login.vue'
export default {
	name: 'app',
	components: {
		Login
	},
	data() {
		return {
			value7: 0
		}
	},
	mounted: function () {
		const _this = this;
		var url = 'ws://localhost:8088/socket';
		var sock = new WebSocket(url);
		sock.onopen = function () {
			console.log("socket start...");
			sock.send("hello world!");
		}
		sock.onmessage = function (msg) {
			console.log(msg.data)
			_this.$notify.info({
				title: '消息',
				message: msg.data
			});
		}
		sock.onclose = function () {
			console.log("socket closs..");
		}
	},
	methods: {
		open5() {
			this.$notify.info({
				title: '消息',
				message: this.title
			});
		}
	}
}
</script>

<style>
.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}
</style>
